<template>
	<view style="background-color: white;">
		<view style="position: relative;">
			<swiper @change="changeSwiper" class="swiper" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
					<image :src="item.src" class="swiper-item-image" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="currentIndex">
				{{currentIndex}}/{{banner.length}}
			</view>
		</view>
		<view class="shopjg">
			<view class="shopjg1">
				<view class="shopjgtext1">￥</view>
				<view class="shopjgtext2">1200.00-1500.00</view>
			</view>
			<view class="shopjg2">
				<image src="../../static/img/xiaofx.png" mode=""></image>
				<text>分享</text>
			</view>
		</view>
		<view class="shopCate">
			<view class="shopCate1">价格</view>
			<view class="shopCate2">1300.00-1600.00</view>
		</view>
		<view class="title">
			红色皮革简约迷你斜挎包/轻奢时尚品牌新款真皮女包手袋单肩斜挎包大容量女士百搭
		</view>
		<view class="shop_box">
			<view class="shop_box_text">
				快递: 12.00元
			</view>
			<view class="shop_box_text">
				月销: 2320笔
			</view>
		</view>
		<view class="shop_xz" @click="open('one')">
			<view class="shop_xz1">
				<view class="shop_xz1text">
					选择
				</view>
				<view class="shop_xz1text1">
					请选择颜色 款式 上市时间
				</view>
			</view>
			<image src="/static/img/youfh.png" mode=""></image>
		</view>
		<view class="shop_xz" @click="open('two')">
			<view class="shop_xz1">
				<view class="shop_xz1text">
					选择
				</view>
				<view class="shop_xz1text1">
					配送至 淄博市张店区马尚镇新村西路185号...
				</view>
			</view>
			<image src="/static/img/youfh.png" mode=""></image>
		</view>
		<view class="shop_pj">
			<view class="shop_pj1">
				评价(1105)
			</view>
			<view class="shop_pj2">
				<view class="" @click="pinglun">
					查看全部
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
		</view>
		<view class="shop_pjxq">
			<view class="shop_pjxq1">
				方便好用 53
			</view>
			<view class="shop_pjxq1">
				颜色绚丽 33
			</view>
			<view class="shop_pjxq1">
				时尚美观 33
			</view>
			<view class="shop_pjxq1">
				方便好用 53
			</view>
			<view class="shop_pjxq1">
				颜色绚丽 33
			</view>
			<view class="shop_pjxq1">
				时尚美观 33
			</view>
		</view>
		<view class="xian"></view>

		<view class="bottom">
			<view class="kf">
				<image style="width: 42rpx;height: 42rpx;" src="../../static/img/kf.png" mode=""></image>
				<view class="">
					客服
				</view>
			</view>
			<view class="gwc">
				<image style="width: 42rpx;height: 42rpx;" src="/static/img/gwc.png" mode=""></image>
				<view class="">
					购物车
				</view>
			</view>
			<view class="ljgm" @click="shopgo">
				立即购买
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup1">
				<view class="popup1-1">
					<view class="popup1-1box">
						<image style="width: 156rpx;
				height: 210rpx;margin: 0 20rpx;" src="../../static/img/xlog.png" mode=""></image>
						<view class="" style="width: 65vw;">
							<view class="" style="display: flex;justify-content: space-between;">
								<view class=""></view>
								<image style="width: 44rpx;
				height: 44rpx;" src="../../static/img/gb.png" mode=""></image>
							</view>
							<view class="popup1-1box1">
								￥1200.00-1500.00
							</view>
							<view class="popup1-1box2">
								库存11002
							</view>
							<view class="popup1-1box3">
								请选择颜色 款式 上市时间
							</view>
						</view>
					</view>
				</view>
				<view class="xian11"></view>
				<view class="popup1-2box">
					<view class="popup1-2box1">
						上市时间
					</view>
					<view class="popup1-2box2">
						<view class="popup1-2box2-1">
							2002年
						</view>
						<view class="popup1-2box2-2">
							2020年
						</view>
					</view>
				</view>
				<view class="xian11"></view>
				<view class="popup1-2box">
					<view class="popup1-2box1">
						颜色类型
					</view>
					<view class="popup1-2box2">
						<view class="popup1-2box2-2">
							格子色
						</view>
						<view class="popup1-2box2-2">
							红色
						</view>
					</view>
				</view>
				<view class="xian11"></view>
				<view class="popup1-2box" style="display: flex;justify-content: space-between;align-items: center;">
					<view class="popup1-2box1">
						购买数量
					</view>
					<view class="popup1-2box2">
						<view class="popup1-2box2-3">
							-
						</view>
						<view class="popup1-2box2-2">
							1
						</view>
						<view class="popup1-2box2-3">
							+
						</view>
					</view>
				</view>
				<view class="xian11"></view>
				<view class="" style="height: 102rpx;">

				</view>
				<view class="bottom">
					<view class="kf">
						<image style="width: 42rpx;height: 42rpx;" src="../../static/img/kf.png" mode=""></image>
						<view class="">
							客服
						</view>
					</view>
					<view class="gwc">
						<image style="width: 42rpx;height: 42rpx;" src="/static/img/gwc.png" mode=""></image>
						<view class="">
							购物车
						</view>
					</view>
					<view class="ljgm">
						立即购买
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="popup2" type="bottom">
			<view class="popup1">
				<view class="popup1-1">
					<view class="popup1-1box">
						<view class="">
							配送到
						</view>
						<view class="" style="width: 65vw;">
							<view class="" style="display: flex;justify-content: space-between;">
								<view class=""></view>
								<image style="width: 44rpx;
				height: 44rpx;" src="../../static/img/gb.png" mode=""></image>
							</view>

						</view>
					</view>
				</view>
				<view class="popup2-1">
					<view class="popup2-1-1">
						<image style="width:36rpx;height: 36rpx; margin: 30rpx;" src="../../static/img/z1117.png"
							mode=""></image>
						<view class="popup2-1-1box">
							<view class="popup2-1-1box1">
								山东省淄博市张店区新村路121号
							</view>
							<view class="popup2-1-1box2">
								淄博市张店区马尚镇
							</view>
						</view>
					</view>
					<view class="popup2-1-1">
						<image style="width:36rpx;height: 36rpx; margin: 30rpx;" src="../../static/img/z1118.png"
							mode=""></image>
						<view class="popup2-1-1box">
							<view class="popup2-1-1box1">
								山东省淄博市张店区新村路121号
							</view>
							<view class="popup2-1-1box2">
								淄博市张店区马尚镇
							</view>
						</view>
					</view>
					<view class="popup2-1-1">
						<image style="width:36rpx;height: 36rpx; margin: 30rpx;" src="../../static/img/z1118.png"
							mode=""></image>
						<view class="popup2-1-1box">
							<view class="popup2-1-1box1">
								山东省淄博市张店区新村路121号
							</view>
							<view class="popup2-1-1box2">
								淄博市张店区马尚镇
							</view>
						</view>
					</view>
					<view class="popup2-1-1">
						<image style="width:36rpx;height: 36rpx; margin: 30rpx;" src="../../static/img/z1118.png"
							mode=""></image>
						<view class="popup2-1-1box">
							<view class="popup2-1-1box1">
								山东省淄博市张店区新村路121号
							</view>
							<view class="popup2-1-1box2">
								淄博市张店区马尚镇
							</view>
						</view>
					</view>
				</view>
				<view class="xian11"></view>
				<view class="boxxz" @click="open('there')">
					选择其它地址
				</view>
				<view class="" style="height: 10rpx;"></view>



			</view>
		</uni-popup>

		<uni-popup ref="popup3" type="bottom">
			<view class="popup1" style="height: 70vh;">
				<view class="popup1-1">
					<view class="popup1-1box">
						<view class="">
							配送到
						</view>
						<view class="" style="width: 65vw;">
							<view class="" style="display: flex;justify-content: space-between;">
								<view class=""></view>
								<image style="width: 44rpx;
				height: 44rpx;" src="../../static/img/gb.png" mode=""></image>
							</view>

						</view>
					</view>
				</view>
				<view class="popup3">
					<view class="popup3-1">
						<view class="popup3-1-box">
							<image src="../../static/img/fdj.png" mode=""></image>
							<input type="text" placeholder="输入城市/拼音">
						</view>
						<view class="">
							取消
						</view>
					</view>
					<view class="popup3-2">
						<view class="popup3-2-box">
							当前城市
						</view>
						<view class="popup3-2-box1" @click="tjdz">
							<image src="../../static/img/dwx.png" mode=""></image>
							<view class="">
								淄博市
							</view>
						</view>
					</view>
					<view class="popup3-2">
						<view class="popup3-2-box">
							区选择
						</view>
						<view class="popup3-2-box">
							A
						</view>

						<view class="popup3-2-box11">
							安康
						</view>
						<view class="popup3-2-box11">
							阿克苏
						</view>
						<view class="popup3-2-box11">
							阿拉善
						</view>
						<view class="popup3-2-box11">
							安庆
						</view>
					</view>
				</view>

				<view class="" style="height: 10rpx;"></view>



			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				banner: [{
						src: '/static/img/title1.png'
					},
					{
						src: '/static/img/title1.png'
					},
					{
						src: '/static/img/title1.png'
					},
				],
			}
		},
		methods: {
			changeSwiper(e) {
				this.currentIndex = e.detail.current + 1
			},
			pinglun() {
				uni.navigateTo({
					url: '/pages/shop/shoppinglun'
				})
			},
			tjdz() {
				uni.navigateTo({
					url: '/pages/shop/shoptjdz'
				})
			},
			shopgo() {
				uni.navigateTo({
					url: '/pages/shop/shopOrder'
				})
			},
			open(e) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (e == "one") {
					this.$refs.popup.open('bottom')
				} else if (e == 'two') {
					this.$refs.popup2.open('bottom')
				} else if (e == 'there') {
					this.$refs.popup3.open('bottom')
				}
			},
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 624rpx;

		&-item {
			width: 100%;
			height: 100%;

			&-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.currentIndex {
		position: absolute;
		bottom: 10upx;
		right: 20upx;
		padding: 6upx 16upx;
		line-height: 1;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 100upx;
		font-size: 26upx;
		color: hsla(0, 0%, 100%, .8);
	}

	.shopjg {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;

		.shopjg1 {
			display: flex;

			.shopjgtext1 {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #FF433C;
				line-height: 30rpx;
			}

			.shopjgtext2 {
				font-size: 40rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #FF433C;
				line-height: 30rpx;
			}
		}

		.shopjg2 {
			display: flex;
			align-items: center;

			>image {
				width: 34rpx;
				height: 34rpx;
			}

			>text {
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FF4140;
				line-height: 28rpx;
			}
		}
	}

	.shopCate {
		display: flex;
		width: 90%;
		margin: 20rpx auto;

		.shopCate1 {
			font-size: 24rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #9A9A9B;
			line-height: 30rpx;
		}

		.shopCate2 {
			margin-left: 10rpx;
			font-size: 26rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			text-decoration: line-through;
			color: #9A9A9B;
			line-height: 30rpx;
		}
	}

	.title {
		width: 90%;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #0A0A0A;
		line-height: 52rpx;
	}

	.shop_box {
		display: flex;
		width: 90%;
		margin: 20rpx auto;

		.shop_box_text {
			margin-right: 140rpx;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #999999;
			line-height: 30rpx;
		}
	}

	.shop_xz {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin: 10rpx auto;

		.shop_xz1 {
			display: flex;

			.shop_xz1text {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #999999;
				line-height: 74rpx;
			}

			.shop_xz1text1 {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #131313;
				line-height: 74rpx;
			}
		}

		>image {
			width: 12rpx;
			height: 24rpx;
		}
	}

	.shop_pj {
		width: 90%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shop_pj1 {
			font-size: 28rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #131313;
			line-height: 94rpx;


		}

		.shop_pj2 {
			display: flex;
			align-items: center;

			>view {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #9A9A9A;
				line-height: 94rpx;
			}

			>image {
				margin-left: 10rpx;
				width: 12rpx;
				height: 24rpx;
			}
		}
	}

	.shop_pjxq {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.shop_pjxq1 {
			margin: 10rpx 20rpx;
			width: 190rpx;
			height: 50rpx;
			background: #FFE6E2;
			border-radius: 26px 26px 26px 26px;
			opacity: 1;
			text-align: center;
			font-size: 12px;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #080302;
			line-height: 50rpx;
		}
	}

	.xian {
		width: 750rpx;
		height: 2px;
		margin: 20rpx 0;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		border: 2px solid #F3F3F2;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: white;
		// margin: 0 5%;
		position: fixed;
		bottom: 0;

		.kf {
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.gwc {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.ljgm {
			width: 512rpx;
			height: 102rpx;
			background: #FF4140;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			font-size: 34rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #FFFFFF;
			text-align: center;
			line-height: 102rpx;
		}
	}

	.popup1 {
		width: 100vw;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.popup1-1 {
			display: flex;
			justify-content: space-between;
			width: 95vw;
			margin: 0rpx auto;
			padding-top: 20rpx;


			.popup1-1box {
				display: flex;
				justify-content: space-between;
				width: 95vw;

				.popup1-1box1 {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #FF433C;
					line-height: 62rpx;
				}

				.popup1-1box2 {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #C2BEBD;
					line-height: 62rpx;
				}

				.popup1-1box3 {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #202020;
					line-height: 30rpx;
				}
			}
		}
	}

	.popup1-2box {
		width: 95vw;
		margin: 0 auto;

		.popup1-2box1 {
			font-size: 32rpx;
			font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
			font-weight: normal;
			color: #242424;
			line-height: 30rpx;
		}

		.popup1-2box2 {
			display: flex;
			align-items: center;

			.popup1-2box2-1 {
				background: #FF4140;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				opacity: 1;
				margin: 20rpx;
				padding: 10rpx 16rpx;
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 30rpx;
			}

			.popup1-2box2-2 {
				background: #F1F1F1;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				opacity: 1;
				margin: 20rpx;
				padding: 10rpx 16rpx;
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: black;
				line-height: 30rpx;
			}

			.popup1-2box2-3 {
				font-size: 38rpx;
				font-weight: 1000;

			}
		}
	}

	.popup2-1 {
		width: 95vw;
		margin: 20rpx auto;

		.popup2-1-1 {
			margin: 10rpx 0;
			display: flex;

			.popup2-1-1box {
				.popup2-1-1box1 {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
				}

				.popup2-1-1box2 {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					line-height: 48rpx;
				}
			}
		}
	}

	.popup3 {
		margin: 20rpx 0;

		.popup3-1 {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.popup3-1-box {
				display: flex;
				align-items: center;
				width: 598rpx;
				height: 76rpx;
				background: #F5F6F7;
				border-radius: 20px 20px 20px 20px;
				opacity: 1;

				>image {
					margin: 0 38rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.popup3-2 {
			width: 95vw;
			margin: 20rpx;

			.popup3-2-box {
				margin: 30rpx 0;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
			}

			.popup3-2-box1 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 152rpx;
				height: 64rpx;
				background: #FF4140;
				border-radius: 4px 4px 4px 4px;
				opacity: 1;

				>image {
					width: 20rpx;
					height: 24rpx;
				}

				>view {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 0px;
				}
			}

			.popup3-2-box11 {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 80rpx;
			}
		}
	}

	.boxxz {
		width: 686rpx;
		height: 102rpx;
		background: #FF4140;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		margin: 30rpx auto;
		font-size: 34rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #FFFFFF;
		text-align: center;
		line-height: 102rpx;
	}

	.xian11 {
		width: 688rpx;
		margin: 20rpx auto;
		height: 1rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		border: 1rpx solid #F6F6F7;
	}
</style>
